<template>
    <div
        :id="props.options.ele"
        style="width:100%; height: 100%;">
    </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import * as echarts from 'echarts/core';
import {
    GridComponent,
    TooltipComponent,
    LegendComponent
} from 'echarts/components';
import { BarChart, LineChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import useBarLine  from './hooks/useBarLine';

echarts.use([GridComponent, BarChart, LineChart, CanvasRenderer, TooltipComponent, LegendComponent]);

const props = defineProps({
    options: {
        type: Object,
        default: () => ({})
    }
})

const { options } = useBarLine(props, 'bar')

onMounted(() => {
    var chartDom: any = document.getElementById(`${props.options.ele}`);
    var myChart = echarts.init(chartDom);
    options && myChart.setOption(options);
})
</script>